<template>
  <div
    class="van-hairline--top mt-4"
    v-for="(item, index) in params"
    :key="`costs_${index}`"
  >
    <div class="card-header flex">
      <div>
        <span>{{ getMapLabel('meetingPriceType', item.category) }}</span>
        <span class="text-warning pl-2">（待支付）</span>
      </div>
    </div>
    <div class="card-container">
      <van-field
        v-model="item.fee"
        label="预算金额"
        readonly
        type="number"
        placeholder="请输入预算金额"
      >
        <template #extra>元</template>
      </van-field>

      <van-field
        v-model="item.actualFee"
        label="实际金额"
        placeholder="请输入实际金额"
      >
        <template #extra>元</template>
      </van-field>

      <van-field readonly label="核销票据">
        <template #input>
          <base-upload
            multiple
            :model-value="item.fileIds"
            @uploadSucc="uploadSuccess($event, index)"
            @deleteFile="deleteFile($event, index)"
            type="17"
            :maxFileCount="1000"
          ></base-upload>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  import useConstant from '@/hooks/useConstant';
  const { getMapLabel } = useConstant();
  const emits = defineEmits(['update']);

  const params = ref([]);

  function uploadSuccess (val, index) {
    val.url = `//${val.url}`
    params.value[index].fileIds.push(val)
  }
  function deleteFile (val, index) {
    const fileIndex = params.value[index].fileIds.findIndex(item => item.fileId == val.fileId)
    params.value[index].fileIds.splice(fileIndex, 1)
  }

  watch(() => params.value, newVal => emits('update', newVal), { deep: true })
  
  defineExpose({
    setParams (detail) {
      const costs = detail.costs || []
      const list = costs.map(item => ({
        fee: item.budgetFee,
        actualFee: item.actualFee || '',
        fileIds: (item.costFile || []).map(item => ({
          url: `//${item.fileVisitPath}`,
          fileId: item.id
        })),
        id: item.id,
        category: item.category
      }))
      params.value = list
    },

    getParams () {
      const _params = JSON.parse(JSON.stringify(params.value))
      _params.forEach(item => {
        item.fileIds = (item.fileIds || []).map(val => val.fileId)
      })
      return _params
    }
  })

</script>